<template>
  <div>
    <el-dialog :title="title" v-model="store.state.editUserDialogVisible" width="400px" center>
      <el-form :model="editForm" label-width="80px">
        <el-form-item prop="username" label="用户名" size="mini">
          <el-input v-model="editForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱" size="mini">
          <el-input v-model="editForm.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话" size="mini">
          <el-input v-model="editForm.phone" placeholder="电话号码"></el-input>
        </el-form-item>
        <el-form-item prop="gender" label="性别" size="mini">
          <el-radio-group v-model="editForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span>
        <el-button size="mini" @click="quitDialog('setEditUserDialogVisible')">取消</el-button>
        <el-button size="mini" @click="InsertOrEdit()">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除电影" v-model="store.state.delUserDialogVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span>
        <el-button size="mini" @click="quitDialog('setDelUserDialogVisible')">取消</el-button>
        <el-button size="mini" @click="deleteMovie">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, onUpdated } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
import { ElMessage } from 'element-plus'

onUpdated(() => {
  setEditMsg()
})

const store = useStore()
const props = defineProps({
  multipleSelection: [],
  editRow: ref(''),
  insertOrEdit: ref('')
})
const emit = defineEmits(['getUserData'])

// 退出Dialog
function quitDialog(val) {
  store.commit(val, false)
}

const title = ref('编辑用户')
const idx = ref('')

function deleteRow() {
  // 使用axios发送删除信息 传参为 idx
  axios
    .get('/api/user/deleteUserAndVip' + '/' + idx.value)
    .then(() => {
      ElMessage.success('删除用户信息成功！')
    })
    .catch(() => {
      ElMessage.warning('删除用户信息失败！')
    })
}

function deleteMovie() {
  for (const item of props.multipleSelection) {
    idx.value = item.uid
    deleteRow()
  }
  emit('getUserData')
  store.commit('setDelUserDialogVisible', false)
}

// 插入和编辑都公用该结构体
const editForm = reactive({
  uid: '',
  username: '',
  addTime: '',
  email: '',
  gender: '',
  phone: '',
  headsrc: '',
  vid: '',
  startTime: '',
  endTime: '',
  vstate: ''
})

// 在触发编辑页面的时候  父控件调用子控件的该函数 将被编辑信息的旧信息先赋值
function setEditMsg() {
  if (props.insertOrEdit === 1) {
    editForm.username = ''
    editForm.email = ''
    editForm.phone = ''
    editForm.gender = ''
    title.value = '添加用户'
  } else {
    editForm.username = props.editRow.username
    editForm.email = props.editRow.email
    editForm.phone = props.editRow.phone
    editForm.gender = props.editRow.gender
    title.value = '编辑用户'
  }
}

function InsertOrEdit() {
  if (props.insertOrEdit === 1) {
    editForm.uid = null
    editForm.addTime = new Date()
    editForm.headsrc = '默认头像.jpg'
    editForm.vid = null
    editForm.startTime = null
    editForm.endTime = null
    editForm.vstate = null
    axios
      .post('/api/user/regist', editForm)
      .then(() => {
        emit('getUserData')
        ElMessage.success('增加用户成功！')
      })
      .catch(() => {
        ElMessage.warning('增加用户失败！')
      })
  } else {
    editForm.uid = props.editRow.uid
    editForm.addTime = props.editRow.addTime
    editForm.headsrc = props.editRow.headsrc
    editForm.vid = props.editRow.vid
    editForm.startTime = props.editRow.startTime
    editForm.endTime = props.editRow.endTime
    editForm.vstate = props.editRow.vstate
    axios
      .post('/api/user/updateUser', editForm)
      .then(() => {
        emit('getUserData')
        ElMessage.success('修改用户信息成功！')
      })
      .catch(() => {
        ElMessage.warning('修改用户信息失败！')
      })
  }
  store.commit('setEditUserDialogVisible', false)
}
</script>
